@import 'normalize6.0.scss';
@import '../lib/swiper.min.scss';
@import 'base.scss';

@function px2rem($size) {
    @return ($size / 32) * 1rem;
}

@mixin bgc($url, $width) {
    background: url($url) no-repeat center / 100% 100%;
    position: absolute;
    left: 50%;
    margin-left: px2rem(-$width / 2);
}

@mixin bg($url) {
    background: url($url) no-repeat center / 100% 100%;
    position: absolute;
}

@mixin size($width, $height) {
    width: px2rem($width);
    height: px2rem($height);
}

html body {
    height: 100%;
}

.lodding {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: #FFECE9;
    z-index: 2;

    .rider {
        @include size(154, 121);
        @include bgc('../images/loading/rider1_.png', 154);
        top: px2rem(233);
        right: px2rem(108);
    }

    .progress {
        @include size(416, 20);
        background-color: #fc2e4d;
        border: 2px solid #373838;
        border-radius: px2rem(20);
        position: absolute;
        top: px2rem(360);
    }

    .info {
        @include size(220, 28);
        @include bgc('../images/loading/loading-txt.png', 220);
        top: px2rem(420);
    }

    .logo {
        @include size(162, 39);
        @include bgc('../images/loading/waimai-logo.png', 162);
        bottom: px2rem(118);
    }

    .copyright {
        width: 100%;
        font-size: px2rem(24);
        color: #e0979e;
        text-align: center;
        position: absolute;
        bottom: px2rem(73);
    }
}

.welcome {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: deepskyblue;
    z-index: 1;

    .info {
        @include size(397, 224);
        @include bgc('../images/page1/theme-title.png', 397);
        top: px2rem(42);

        .hello {
            @include size(70, 75);
            @include bg('../images/page1/hello.png');
            top: px2rem(20);
            right: px2rem(8);
        }
    }

    .bear-box {
        @include size(167, 279);
        position: absolute;
        bottom: px2rem(346);
        left: 50%;
        margin-left: px2rem(-167/2);

        .bear {
            width: 100%;
            height: 100%;
            @include bg('../images/page1/rider2.png');
            top: 0;
            left: 0;
        }

        .smoke {
            @include size(167, 32);
            @include bgc('../images/page1/jet1.png', 167);
            bottom: 0;
        }
    }

    .cloud {
        @include size(640, 673);
        @include bgc('../images/page1/clouds.png', 640);
        bottom: 0;
    }

    .grass1 {
        @include size(640, 396);
        @include bgc('../images/page1/grass1.png', 640);
        bottom: 0;
    }

    .trees {
        @include size(599, 71);
        @include bgc('../images/page1/trees.png', 599);
        bottom: px2rem(352);
    }

    .grass2 {
        @include size(640, 228);
        @include bgc('../images/page1/grass2.png', 640);
        bottom: 0;
    }

    .rotate-bnt-box {
        @include size(208, 208);
        position: absolute;
        bottom: px2rem(32);
        left: 50%;
        margin-left: px2rem(-208/2);

        .btn {
            @include size(124, 124);
            @include bgc('../images/page1/bear-btn-aft.png', 124);
            top: 50%;
            margin-top: px2rem(-124/2);
        }

        .circle1 {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            @include bg('../images/page1/circle1.png');
        }

        .circle2 {
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            @include bg('../images/page1/circle1.png');
        }
    }
}

.waimai-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    // background: pink;
}

.title {
    position: absolute;
    top: px2rem(32);
    left: px2rem(32);
    padding-left: px2rem(20);

    h3 {
        color: #FFF;
        font-size: px2rem(64);
    }

    p {
        color: #FFF;
        font-size: (24);
        padding-top: px2rem(12);
    }

    .line {
        width: px2rem(5);
        height: 100%;
        background-color: #fff;
        position: absolute;
        top: 0;
        left: 0;
    }
}

.page1 {
    background-color: #BE8651;

    .scroll-page1 {
        .bg {
            @include size(576, 573);
            @include bgc('../images/page2/bg1.png', 576);
            bottom: px2rem(252);
        }

        .person {
            @include size(439, 349);
            @include bgc('../images/page2/front1.png', 439);
            bottom: px2rem(290);
            z-index: 1;

            .files {
                @include size(85, 50);
                background-image: url('../images/page2/papers.png');
                background-repeat: no-repeat;
                background-position: bottom right;
                background-size: px2rem(115) px2rem(114);
                position: absolute;
                bottom: px2rem(104);
                left: px2rem(27);

                .paper1 {
                    @include size(86, 26);
                    background-image: url('../images/page2/papers.png');
                    background-repeat: no-repeat;
                    background-position: 0 px2rem(-32);
                    background-size: px2rem(115) px2rem(114);
                    position: absolute;
                    bottom: px2rem(45);
                    left: px2rem(-70);
                }

                .paper2 {
                    @include size(64, 20);
                    background-image: url('../images/page2/papers.png');
                    background-repeat: no-repeat;
                    background-position: px2rem(-45) px2rem(0);
                    background-size: px2rem(115) px2rem(114);
                    position: absolute;
                    bottom: px2rem(80);
                    right: px2rem(0);
                }
            }
        }

        .message-contanier {
            display: flex;
            @include size(363, 119);
            @include bg('../images/page2/txt-bubbl.png');
            bottom: px2rem(140);
            right: px2rem(140);
            justify-content: center;
            align-items: center;
            z-index: 1;

            .info {
                @include size(220, 30);
                @include bg('../images/page2/txt-work.png');
            }
        }
    }

    .scroll-page2 {
        .bg {
            @include size(566, 520);
            @include bgc('../images/page2/bg2.png', 586);
            bottom: px2rem(252);
        }

        .person {
            @include size(436, 332);
            @include bgc('../images/page2/relax.png', 436);
            bottom: px2rem(270);
            z-index: 1;

            .leg1 {
                @include size(113, 24);
                @include bg("../images/page2/leg1.png");
                left: px2rem(195);
                bottom: px2rem(110);
            }

            .leg2 {
                @include size(85, 71);
                @include bg("../images/page2/leg2.png");
                left: px2rem(193);
                bottom: px2rem(120);
            }
        }

        .message-contanier {
            display: flex;
            @include size(363, 119);
            @include bg('../images/page2/txt-bubbl.png');
            bottom: px2rem(140);
            right: px2rem(140);
            justify-content: center;
            align-items: center;
            z-index: 1;

            .info {
                @include size(224, 31);
                @include bg('../images/page2/txt-life.png');
            }
        }
    }

    .scroll-page3 {
        .bg {
            @include size(561, 516);
            @include bgc('../images/page2/bg3.png', 561);
            bottom: px2rem(270);
        }

        .person {
            @include size(503, 229);
            @include bgc('../images/page2/person.png', 503);
            bottom: px2rem(300);
            z-index: 1;

            .word1 {
                @include size(92, 83);
                @include bg("../images/page2/word1.png");
                left: px2rem(7);
                bottom: px2rem(194);
            }

            .word2 {
                @include size(77, 70);
                @include bg("../images/page2/word2.png");
                left: px2rem(115);
                bottom: px2rem(245);
            }

            .word3 {
                @include size(115, 104);
                @include bg("../images/page2/word3.png");
                right: px2rem(130);
                bottom: px2rem(220);
            }

            .word4 {
                @include size(79, 73);
                @include bg("../images/page2/word4.png");
                right: px2rem(12);
                bottom: px2rem(230);
            }
        }

        .message-contanier {
            display: flex;
            @include size(363, 119);
            @include bg('../images/page2/txt-bubbl.png');
            bottom: px2rem(140);
            right: px2rem(140);
            justify-content: center;
            align-items: center;
            z-index: 1;

            .info {
                @include size(224, 31);
                @include bg('../images/page2/txt-res.png');
            }
        }
    }

    .sphere {
        @include size(640, 356);
        @include bgc('../images/page2/sphere1.png', 640);
        bottom: px2rem(0);
    }

    .bear {
        @include size(178, 134);
        @include bg('../images/page2/bear1.png');
        right: px2rem(38);
        bottom: px2rem(0);
    }
}

.page2 {
    background-color: #EE4143;

    .bg {
        @include size(592, 490);
        @include bgc("../images/page3/bg4_.png", 592);
        bottom: px2rem(330);
    }

    .bear {
        @include size(227, 336);
        background-image: url("../images/page3/bear2.png");
        background-repeat: no-repeat;
        background-size: px2rem(368) px2rem(427);
        background-position: px2rem(-103) px2rem(-96);
        position: absolute;
        bottom: px2rem(310);
        left: 50%;
        margin-left: px2rem(-227/2);
        z-index: 1;

        .face1 {
            @include size(102, 102);
            @include bg('../images/page3/face1.png');
            top: 0;
            left: px2rem(-102);
        }

        .face2 {
            @include size(101, 102);
            @include bg('../images/page3/face2.png');
            top: px2rem(-102);
            right: px2rem(-101/2);
        }

        .hand-left {
            @include size(74, 77);
            @include bg("../images/page3/hand-left_.png");
            top: px2rem(180);
            left: px2rem(30);
        }

        .hand-right {
            @include size(74, 77);
            @include bg("../images/page3/hand-right.png");
            top: px2rem(180);
            right: px2rem(30);
        }
    }

    .sphere {
        @include size(640, 356);
        @include bg("../images/page3/sphere2.png");
        bottom: px2rem(0);
    }

    .table {
        @include size(514, 258);
        @include bgc("../images/page3/table.png", 514);
        bottom: px2rem(140);
        z-index: 1;
    }

    .food {
        @include size(354, 152);
        @include bgc("../images/page3/foods.png", 354);
        bottom: px2rem(330);
        z-index: 1;
    }
}

.page3 {
    background-color: #dd8a03;
    .bg {
        @include size(592, 580);
        @include bgc("../images/page4/bg5.png", 592);
        bottom: px2rem(300);
    }
    .bear {
        @include size(206, 321);
        @include bgc("../images/page4/bear3.png", 206);
        bottom: px2rem(195);
        z-index: 1;
    }
    
    .sphere {
        @include size(640, 356);
        @include bg("../images/page4/sphere3.png");
        bottom: px2rem(0);
    }
    .license {
        @include size(197, 140);
        @include bg("../images/page4/license.png");
        left: px2rem(40);
        bottom: px2rem(500);
    }
    .oil {
        @include size(205, 107);
        @include bgc("../images/page4/oil.png", 205);
        bottom: px2rem(660);
    }
    .evil {
        @include size(198, 163);
        @include bg("../images/page4/evil2.png");
        bottom: px2rem(480);
        right: px2rem(30);
    }

}

.page4 {
    background-color: #3FA100;
    .bg {
        @include size(588, 333);
        @include bgc("../images/page5/bg6.png", 588);
        bottom: px2rem(300);
    }
    .bear {
        @include size(309, 325);
        @include bg("../images/page5/bear4.png");
        left: px2rem(200);
        bottom: px2rem(170);
        z-index: 1;
    }
    
    .sphere {
        @include size(640, 356);
        @include bg("../images/page5/sphere4.png");
        bottom: px2rem(0);
    }
    .card1 {
        @include size(160, 175);
        @include bg("../images/page5/card1.png");
        left: px2rem(32);
        bottom: px2rem(435);
    }
    .card2 {
        @include size(161, 209);
        @include bgc("../images/page5/card2.png", 161);
        bottom: px2rem(530);
    }
    .card3 {
        @include size(167, 184);
        @include bg("../images/page5/card3.png");
        bottom: px2rem(480);
        right: px2rem(45);
    }
}

.page5 {
    background-color: #0098CF;
    .bg {
        @include size(594, 493);
        @include bgc("../images/page6/bg7.png", 594);
        bottom: px2rem(300);
    }
    .bear {
        @include size(230, 390);
        @include bgc("../images/page6/rider2.png", 230);
        bottom: px2rem(175);
        z-index: 1;
        .smoke {
            @include size(114, 26);
            @include bgc("../images/page6/shadow.png", 114);
            bottom: px2rem(0);
        }
    }
    
    .sphere {
        @include size(640, 356);
        @include bg("../images/page6/sphere5.png");
        bottom: px2rem(0);
    }
    .cloud {
        @include size(432, 160);
        @include bgc("../images/page6/weather-cloud.png", 432);
        bottom: px2rem(80+390+175);
    }
}

.page6 {
    background-color: #B527A0;
    .bg {
        @include size(588, 333);
        @include bgc("../images/page7/bg8.png", 588);
        bottom: px2rem(300);
    }
    .bear {
        @include size(285, 328);
        @include bgc("../images/page7/bear5.png", 285);
        bottom: px2rem(175);
        z-index: 1;
        .gift-box {
            position: absolute;
            top: 0;
            left: 50%;
            .gift1 {
                @include size(35, 29);
                @include bgc("../images/page7/gift1.png", 35);
                transform: rotate(28deg) translateY(px2rem(240));
            }
            .gift2 {
                @include size(93, 79);
                @include bgc("../images/page7/gift2.png", 93);
                transform: rotate(28deg * 2) translateY(px2rem(240));
            }
            .gift3 {
                @include size(72, 64);
                @include bgc("../images/page7/gift3.png", 72);
                transform: rotate(28deg * 3) translateY(px2rem(240));
            }
            .gift4 {
                @include size(91, 73);
                @include bgc("../images/page7/gift4.png", 91);
                transform: rotate(28deg * 4) translateY(px2rem(240));
            }
            .gift5 {
                @include size(99, 65);
                @include bgc("../images/page7/gift5.png", 99);
                transform: rotate(28deg * 5) translateY(px2rem(240));
            }
            .gift6 {
                @include size(107, 80);
                @include bgc("../images/page7/gift6.png", 107);
                transform: rotate(28deg * 6) translateY(px2rem(240));
            }
            .gift7 {
                @include size(107, 80);
                @include bgc("../images/page7/gift7.png", 107);
                transform: rotate(28deg * 7) translateY(px2rem(240));
            }
            .gift8 {
                @include size(88, 64);
                @include bgc("../images/page7/gift8.png", 88);
                transform: rotate(28deg * 8) translateY(px2rem(240));
            }
            .gift9 {
                @include size(78, 50);
                @include bgc("../images/page7/gift9.png", 78);
                transform: rotate(28deg * 9) translateY(px2rem(240));
            }
            .gift10 {
                @include size(49, 37);
                @include bgc("../images/page7/gift10.png", 49);
                transform: rotate(28deg * 10) translateY(px2rem(240));
            }
            .gift11 {
                @include size(51, 31);
                @include bgc("../images/page7/gift11.png", 51);
                transform: rotate(28deg * 11) translateY(px2rem(240));
            }
            .gift12 {
                @include size(37, 23);
                @include bgc("../images/page7/gift12.png", 37);
                transform: rotate(28deg * 12) translateY(px2rem(240));
            }
        }
    }
    .sphere {
        @include size(640, 356);
        @include bg("../images/page7/sphere6.png");
        bottom: px2rem(0);
    }
}

.page7 {
    background-color: #19072A;
    .streetlight {
        @include size(88, 443);
        @include bg("../images/page8/streetlight.png");
        bottom: px2rem(300);
        left: px2rem(240);
        .light {
            @include size(437, 427);
            @include bg("../images/page8/lamplight.png");
            top: px2rem(10);
            left: px2rem(-140);
        }
    }
    .motobike {
        @include size(200, 137);
        @include bg("../images/page8/moto.png");
        left: px2rem(120);
        bottom: px2rem(335);
    }
    .bear {
        @include size(276, 271);
        @include bg("../images/page8/bear6.png");
        bottom: px2rem(280);
        left: px2rem(230);
        z-index: 1;
    }
    .sphere {
        @include size(640, 384);
        @include bg("../images/page8/sphere7.png");
        bottom: px2rem(0);
    }
    .share {
        @include size(379, 113);
        @include bgc("../images/page8/share.png", 379);
        bottom: px2rem(140);
    }
    .info {
        width: 100%;
        text-align: center;
        font-size: px2rem(24);
        color: #b579d6;
        position: absolute;
        bottom: px2rem(70);
    }
}